<template>
	<el-image
		:src="getImgSrc"
		:fit="FieldItem?.attrs.fit"
		:lazy="FieldItem?.attrs.isLazy"
		:style="style"
		:preview-src-list="FieldItem?.attrs.isPreview ? [modelValue] : []"
	></el-image>
</template>

<script setup lang="ts">
import { TabFieldType } from '/@/components/Linxyun/custom/DataStructs/commontype';
const props = withDefaults(
	defineProps<{
		FieldItem: TabFieldType | null;
		modelValue: string;
	}>(),
	{
		FieldItem: null,
	}
);

const { FieldItem, modelValue } = toRefs(props);
const setting = localStorage.getItem('setting') ? JSON.parse(localStorage.getItem('setting')!) : {};
const formatSrc = (src: string) => {
	if (src.startsWith('data:')) {
		return src;
	} else {
		return setting.ImagUrl + src;
	}
};
// 计算图片的路劲
const getImgSrc = computed(() => {
	if (modelValue.value.indexOf(':=') !== -1) {
		return modelValue.value.split(':=')[1];
	} else {
		return modelValue.value || formatSrc(FieldItem.value?.attrs.defaultImage);
	}
});

const style = reactive({
	height: FieldItem.value?.attrs.style.height + 'px',
	width: FieldItem.value?.attrs.style.width + 'px',
	borderWidth: FieldItem.value?.attrs.style.borderWidth + 'px',
	borderColor: FieldItem.value?.attrs.style.borderColor,
	borderStyle: FieldItem.value?.attrs.style.borderStyle,
});
</script>

<style lang="scss" scoped></style>
